<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="nav" id="demo" index="1"></div>

<script>

    var element = document.querySelector('div');
    // 1.获取元素的属性值
    // (1) element.属性  获取属性值        获取内置属性值 (元素本身自带的属性, 如 id, class)
    console.log(element.id);

    // (2) element.getAttribute('属性')   主要获取自定义的属性 (标准) 我们程序员自定义的属性
    console.log(element.getAttribute('id'));
    console.log(element.getAttribute('index'));

    // 2.设置属性值
    // (1) element.属性 = ''
    element.id = 'test';
    element.className = 'navs'

    // (2) element.setAttribute('属性', '值'); 主要针对自定义属性
    element.setAttribute('index', '999');
    element.setAttribute('class', 'footer');    // class特殊, 这里就是写的class 不是className
    console.log(element.getAttribute('id'));
    console.log(element.getAttribute('index'));

    // 3.移除属性 removeAttribute('属性')
    element.removeAttribute('index')
    // element.removeAttribute('index'):  null
    console.log(`element.removeAttribute('index'):  ${element.getAttribute('index')}`);
</script>
</body>
</html>
